<template>
    <el-card class="layout-home">
        <el-form :model="form" inline>
            <el-row class="showRow">
                <el-col>
                    <el-form-item label="名称">
                        <el-input placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="名称">
                        <el-input placeholder="请输入"></el-input>
                    </el-form-item>
 
                    <el-form-item label="名称">
                        <el-input placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="名称">
                        <el-input placeholder="请输入" />
                    </el-form-item>
                    
                    <el-form-item v-show="showAll" >
                        <el-button type="primary">查询</el-button>
                        <el-button type="primary">重置</el-button>
                        
                    </el-form-item>
                </el-col>
                    <el-col>
                        <el-form-item v-show="showAll" >
                        <search-button :show-all="showAll" @closepop="closepop"></search-button>
                        </el-form-item>  
                    </el-col>
                    
            </el-row>
            <el-row :class="!showAll ? 'showRow' : 'hideRow'">
                <el-col>
                    <el-form-item label="名称"><el-input placeholder="请输入"></el-input> </el-form-item>
                    <el-form-item label="名称"><el-input placeholder="请输入"></el-input> </el-form-item>
                    <el-form-item label="名称"><el-input placeholder="请输入"></el-input> </el-form-item>
                    <el-form-item v-show="!showAll" >
                        <el-button type="primary">查询</el-button>
                        <el-button type="primary">重置</el-button>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item v-show="!showAll" >
                        <search-button :show-all="showAll" @closepop="closepop"></search-button>
                    </el-form-item>
                </el-col>
                    
                    
                
            </el-row>
        </el-form>

        <el-table :data="tableData" stripe style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
            <el-table-column prop="date" label="Date" width="180" sortable />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
        </el-table>
    </el-card>
</template>

<script>
import SearchButton from '@/components/UpDown/index.vue'
export default {
    components: {
        SearchButton
    },
    data() {
        return {
            form: {},
            showAll: true,
            tableData: [
                {
                    date: '2016-05-03',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-02',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-04',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-01',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
            ]
        }
    },
    methods: {
        closepop() {
            this.showAll = !this.showAll
            console.log('父组件的状态：' + this.showAll)
        }
    }
}
</script>

<style scoped>
.showRow {
    display: block;
}

.hideRow {
    display: none;
}

.cell-item {
  display: flex;
  align-items: center;
}
</style>
